<template>
  <div class="fixed-zbest chapter-list" @scroll.stop="scrollEvent">
    <div class="chapter-list-all" ref="content">
      <header class="header">
        <van-icon
          class="icon"
          @click.stop="$emit('closeComponent')"
          name="arrow-left"
        />
        <div class="text">目录</div>
      </header>
      <section class="book-info" title="书籍信息" v-if="bookInfo">
        <div
          class="img-box"
          :style="{
            backgroundImage: `url(${
              bookInfo.link.filter((item) => item.type == 'image/png')[0].href
            })`,
          }"
        ></div>
        <div class="right">
          <div class="my-text title">{{ bookInfo.title }}</div>
          <div class="my-text des">{{ bookInfo.summary }}</div>
        </div>
      </section>
      <section class="list" title="章节">
        <div class="list-header">
          <div>共28章</div>
          <div>倒序</div>
        </div>
        <div class="list-all" v-if="showList">
          <ChapterItem
            v-for="(item, index) in showList"
            :key="index"
            :item="item"
            :readPage="readPage"
            @toThisPage="toThisPage"
          />
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import ChapterItem from "./ChapterItem.vue";
export default {
  props: ["list", "bookInfo","id","readPage"],
  components: {
    ChapterItem,
  },
  data: () => {
    return {
      chapterList: [],
      nextUrl: null,
      start: 0,
      limit: 10,
      userTime: 0,
    };
  },
  computed: {
    showList() {
      return this.chapterList.slice(this.start, this.limit);
    },
  },
  methods: {
    //滚动事件
    scrollEvent(e) {
      clearTimeout(this.userTime);
      this.userTime = setTimeout(() => {
        let content = getComputedStyle(this.$refs.content);
        console.log(e.target.scrollTop, Number.parseInt(content.height));
        if (
          Number.parseInt(content.height) -
            e.target.clientHeight -
            e.target.scrollTop <
          100
        ) {
          this.limit += 10;
        }
      }, 500);
    },
    //产生阅读记录
    toThisPage(page){
      console.log(this.bookInfo,page,'de');
      this.api.changeReading({
        bookInfo:this.bookInfo,
        page:page
      });
      this.$emit('getPage');
      this.$router.push({
        name: "read",
        params: {
          bookid: this.bookInfo.id,
        },
      });
    },
    getAllChapterList() {
      this.axios({
        method: "get",
        url: `${this.api.baseUrlData}/yunyuedu/reader/book/info.json?source_uuid=${this.bookInfo.id}`,
      }).then((res) => {
        this.chapterList = res.data.data.catalog;
        console.log(this.chapterList);
      });
    },
  },
  created() {
    this.getAllChapterList();
    console.log(this.bookInfo, "bookInfo");
  },
};
</script>

<style lang="scss" scoped>
.chapter-list {
  width: 100%;
  overflow: scroll;
  &::-webkit-scrollbar {
    display: none;
  }

  .header {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 100;
    background-color: var(--bgc-white);
    width: 100%;
    height: 0.5rem;
    color: var(--text-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 0.15rem;
    border-bottom: 0.01rem solid var(--border-gray);

    .icon {
      font-size: 0.2rem;
      min-width: 0.2rem;
    }

    .text {
      font-size: 0.15rem;
      flex-grow: 1;
      text-align: center;
      line-height: 0.5rem;
      font-weight: bold;
    }
  }

  .book-info {
    width: 100%;
    margin: 0.3rem 0;
    box-sizing: border-box;
    padding: 0 0.15rem;
    display: flex;
    justify-content: space-between;
    .img-box {
      width: 0.6rem;
      min-width: 0.6rem;
      aspect-ratio: 61/79;
      box-shadow: 0.025rem 0.025rem 0.05rem 0.05rem var(--border-gray);
    }
    .right {
      flex-grow: 1;
      margin-left: 0.2rem;
      display: flex;
      justify-content: center;
      flex-direction: column;
      .title {
        font-size: 0.15rem;
        color: var(--text-black);
      }
      .des {
        font-size: 0.13rem;
        color: var(--text-gray);
        margin-top: 0.05rem;
      }
    }
  }

  .list {
    width: 100%;
    box-sizing: border-box;
    padding: 0.15rem;
    .list-header {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.15rem 0;
    }
  }
}
</style>